<template>
    <el-form :model="propJson" label-width="auto" style="width: 100%">
        <el-form-item label="固钉整体宽度">
            <el-input v-model="propJson.affixWidth" style="width: 100%" placeholder="固钉整体宽度" />
        </el-form-item>

        <el-form-item label="固钉文字大小">
            <el-input v-model="propJson.affixNameSize" style="width: 100%" placeholder="固钉文字大小" />
        </el-form-item>

        <el-form-item label="固钉浮动位置">
            <el-radio-group v-model="propJson.positionType">
                <el-radio label="rightBottom">右下</el-radio>
                <el-radio label="rightTop">右上</el-radio>
                <el-radio label="leftBottom">左下</el-radio>
                <el-radio label="leftTop">左上</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="距左侧位置" v-if="propJson.positionType === 'leftBottom' || propJson.positionType === 'leftTop'">
            <el-input v-model="propJson.positionLeft" style="width: 100%" placeholder="距左侧位置" />
        </el-form-item>

        <el-form-item label="距右侧位置" v-if="propJson.positionType === 'rightBottom' || propJson.positionType === 'rightTop'">
            <el-input v-model="propJson.positionRight" style="width: 100%" placeholder="距右侧位置" />
        </el-form-item>

        <el-form-item label="距顶部位置" v-if="propJson.positionType === 'rightTop' || propJson.positionType === 'leftTop'">
            <el-input v-model="propJson.positionTop" style="width: 100%" placeholder="距顶部位置" />
        </el-form-item>

        <el-form-item label="距底部位置" v-if="propJson.positionType === 'rightBottom' || propJson.positionType === 'leftBottom'">
            <el-input v-model="propJson.positionBottom" style="width: 100%" placeholder="距底部位置" />
        </el-form-item>

        <el-form-item label="按钮距顶间隔">
            <el-input v-model="propJson.cardPaddingTop" style="width: 100%" placeholder="按钮距顶间隔" />
        </el-form-item>

        <el-form-item label="按钮距底间隔">
            <el-input v-model="propJson.cardPaddingBottom" style="width: 100%" placeholder="按钮距底间隔" />
        </el-form-item>

        <el-divider>展示固钉条件配置</el-divider>

        <CommonThirdServiceValue :actionInfo="propJson.affixShow ? propJson.affixShow : {}" :commonParam="commonParam" />

        <el-divider>固钉按钮配置</el-divider>

        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
            <el-button type="primary" class="addCollapse" size="small" @click="addAffixButton()">添加固钉按钮</el-button>
        </div>
        <br />

        <el-collapse>
            <el-collapse-item :name="index" v-for="(item, index) in propJson.affixList" style="border: 1px solid #b1b3b8">
                <template #title>
                    <div class="collapseTitle">
                        <span>按钮名称：{{item.affixName}}</span>
                        <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteAffixButton(index)">删除</el-button>
                    </div>
                </template>

                <el-form-item label="按钮名称">
                    <el-input v-model="item.affixName" style="width: 100%" placeholder="按钮名称" />
                </el-form-item>

                <el-form-item label="按钮图标">
                    <el-select v-model="item.buttonIcon" clearable placeholder="选择图标" filterable style="width: 100%">
                        <el-option v-for="iconItem in icons.dataList" :key="iconItem.id" :value="iconItem.componentName" :label="iconItem.componentCnName"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="按钮大小">
                    <el-select v-model="item.buttonSize" placeholder="按钮大小" style="width: 100%">
                        <el-option label="小号" value="small" />
                        <el-option label="默认" value="default" />
                        <el-option label="大号" value="large" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否展示角标">
                    <el-radio-group v-model="item.isAddBadge">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="角标类型" v-if="item.isAddBadge">
                    <el-select v-model="item.badgeType" placeholder="角标类型" style="width: 100%">
                        <el-option label="普通" value="primary" />
                        <el-option label="成功" value="success" />
                        <el-option label="日志级别" value="info" />
                        <el-option label="警告" value="warning" />
                        <el-option label="危险" value="danger" />
                    </el-select>
                </el-form-item>

                <el-form-item label="是否只展示小圆点" v-if="item.isAddBadge">
                    <el-radio-group v-model="item.badgeIsBot">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="展示最大的数字" v-if="item.isAddBadge && !item.badgeIsBot">
                    <el-input-number v-model="item.badgeMaxNum" :min="0"/>
                </el-form-item>

                <el-divider v-if="item.isAddBadge && !item.badgeIsBot">角标展示值设置</el-divider>

                <CommonThirdServiceValue v-if="item.isAddBadge && !item.badgeIsBot" :actionInfo="item.badgeValue ? item.badgeValue : {}" :commonParam="commonParam" />


                <el-divider>按钮行为配置</el-divider>
                <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                    <el-button type="primary" class="addCollapse" size="small" @click="addAffixButtonAction(item)">添加按钮行为</el-button>
                </div>
                <br />

                <CommonThirdServiceAction :actionList="item.affixAction" :commonParam="commonParam"/>

            </el-collapse-item>
        </el-collapse>
    </el-form>
</template>

<script>

import {componentIconInfoQuery} from "@/request/components";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction"
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue"

export default {
    name: "AffixDrawer",
    props: ['commonParam'],
    data() {
        return {
            icons: []
        }
    },
    components: {
        CommonThirdServiceAction,
        CommonThirdServiceValue
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    },
    methods: {
        addAffixButton() {
            let affix = {
                affixName: "",
                buttonIcon: "",
                affixAction: [],
                buttonSize: "small"
            }
            this.propJson.affixList.push(affix)
        },
        deleteAffixButton(index) {
            this.propJson.affixList.splice(index, 1);
        },
        addAffixButtonAction(item) {
            if (!item.affixAction) {
                item.affixAction = []
            }
            let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
            item.affixAction.push(variableInfo)
        }
    },
    mounted() {
        let param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 1000
            }
        }
        componentIconInfoQuery(param).then(res => {
            this.icons = res.data;
        });
    }
}
</script>

<style scoped lang="less">

</style>